import React from 'react';
import type * as ReactNative from 'react-native';
import { ScrollView, Text, View, StyleSheet, Alert } from 'react-native';
import {
  MapView,
  Circle,
  Polygon,
  Polyline,
  Marker,
  LatLng,
  CameraPosition,
} from 'react-native-amap3d';

const points = [
  {
    latitude: 39.806901,
    longitude: 116.397972,
  },
  {
    latitude: 39.806901,
    longitude: 116.297972,
  },
  {
    latitude: 39.906901,
    longitude: 116.397972,
  },
];

const points2 = [
  {
    latitude: 39.836901,
    longitude: 116.497972,
  },
  {
    latitude: 39.836901,
    longitude: 116.397972,
  },
  {
    latitude: 39.936901,
    longitude: 116.497972,
  },
];

const line1 = [
  { latitude: 40.006901, longitude: 116.097972 },
  { latitude: 40.006901, longitude: 116.597972 },
];
const line3 = [
  { latitude: 39.806901, longitude: 116.097972 },
  { latitude: 39.806901, longitude: 116.257972 },
  { latitude: 39.806901, longitude: 116.457972 },
  { latitude: 39.806901, longitude: 116.597972 },
];

function AMapDemo6() {
  return (
    <View style={styles.container}>
      <MapView
        style={{ flex: 1 }}
        mapType={1}
        myLocationEnabled={true}
        onPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
          console.info(
            'AMapViewEventType map3d demo ' +
              event.nativeEvent.latitude +
              '===' +
              event.nativeEvent.longitude,
          );
        }}
        onLongPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
          console.info(
            'AMapViewEventType map3d demo longevent===' +
              event.nativeEvent.latitude +
              '===' +
              event.nativeEvent.longitude,
          );
        }}
        onLoad={(event: ReactNative.NativeSyntheticEvent<any>) => {
        }}>
        <Marker
          icon={{uri: 'https://i.postimg.cc/sfGFNvrv/map.png'}}
          draggable={true}
          position={{ latitude: 39.806901, longitude: 116.397972 }}
          onPress={() => Alert.alert('onPress')}
          onDragEnd={({ nativeEvent }) =>
            Alert.alert(
              `onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`,
            )
          }
        />

        <Marker
          icon={{uri: 'https://i.postimg.cc/W4jMB5MN/map.png'}}
          draggable={true}
          position={{ latitude: 38.806901, longitude: 115.397972 }}
          onPress={() => Alert.alert('onPress')}
          onDragEnd={({ nativeEvent }) =>
            Alert.alert(
              `onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`,
            )
          }
        />

        <Marker
          icon={{uri: 'https://i.postimg.cc/bwLp5kkp/address.jpg', height: 100}}
          draggable={true}
          position={{ latitude: 40.846901, longitude: 116.597972 }}
          onPress={() => Alert.alert('onPress')}
          onDragEnd={({ nativeEvent }) =>
            Alert.alert(
              `onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`,
            )
          }
        />

        <Marker
          icon={{uri: 'https://i.postimg.cc/DZcwMwnp/location.webp', width: 80}}
          draggable={true}
          position={{ latitude: 40.846901, longitude: 117.597972 }}
          onPress={() => Alert.alert('onPress')}
          onDragEnd={({ nativeEvent }) =>
            Alert.alert(
              `onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`,
            )
          }
        />

        <Marker
          icon={{uri: 'https://i.postimg.cc/wjD9QnTy/1.gif', width: 100, height: 100}}
          draggable={true}
          position={{ latitude: 39.806901, longitude: 117.397972 }}
          onPress={() => Alert.alert('onPress')}
          onDragEnd={({ nativeEvent }) =>
            Alert.alert(
              `onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`,
            )
          }
        />

        <Marker
          icon={{uri: 'https://i.postimg.cc/63SrrfJZ/de-tu.jpeg', width: 100, height: 100}}
          draggable={true}
          position={{ latitude: 37.807901, longitude: 117.407972 }}
          onPress={() => Alert.alert('onPress')}
          onDragEnd={({ nativeEvent }) =>
            Alert.alert(
              `onDragEnd: ${nativeEvent.latitude}, ${nativeEvent.longitude}`,
            )
          }
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    paddingTop: 24,
  }
});
export default AMapDemo6;
